<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码识别 - 客户端示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }

        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            background: #f8f9ff;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .upload-area:hover {
            border-color: #764ba2;
            background: #f0f2ff;
        }

        .upload-area.dragover {
            border-color: #764ba2;
            background: #e8ebff;
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        input[type="file"] {
            display: none;
        }

        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px 5px;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .preview {
            margin: 20px 0;
            text-align: center;
        }

        .preview img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 10px;
            background: #f8f9ff;
        }

        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
        }

        .qrcode-item {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .qrcode-text {
            font-size: 16px;
            color: #333;
            word-break: break-all;
            margin-bottom: 10px;
        }

        .qrcode-location {
            font-size: 12px;
            color: #666;
            font-family: monospace;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .loading.active {
            display: block;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .api-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .api-info code {
            background: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 二维码识别</h1>
        <p class="subtitle">上传图片或拖拽图片到下方区域进行识别</p>

        <div class="api-info">
            <strong>⚙️ API 地址配置:</strong>
            <input type="text" id="apiUrl" value="http://localhost:3000" 
                   style="width: 100%; padding: 8px; margin-top: 10px; border: 1px solid #ddd; border-radius: 5px;">
        </div>

        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📸</div>
            <p style="font-size: 18px; color: #667eea; margin-bottom: 10px;">点击或拖拽图片到这里</p>
            <p style="font-size: 14px; color: #999;">支持 JPG, PNG, GIF, BMP, WebP 格式</p>
            <input type="file" id="fileInput" accept="image/*">
        </div>

        <div class="preview" id="preview"></div>

        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p style="margin-top: 15px; color: #667eea;">正在识别中...</p>
        </div>

        <div id="result"></div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const apiUrlInput = document.getElementById('apiUrl');

        // 点击上传区域
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                handleFile(file);
            }
        });

        // 拖拽上传
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                handleFile(file);
            }
        });

        // 处理文件
        async function handleFile(file) {
            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                preview.innerHTML = `<img src="${e.target.result}" alt="预览图片">`;
            };
            reader.readAsDataURL(file);

            // 上传识别
            await recognizeQRCode(file);
        }

        // 识别二维码
        async function recognizeQRCode(file) {
            const apiUrl = apiUrlInput.value.trim() || 'http://localhost:3000';
            
            loading.classList.add('active');
            result.innerHTML = '';

            try {
                const formData = new FormData();
                formData.append('image', file);

                const response = await fetch(`${apiUrl}/api/recognize`, {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                loading.classList.remove('active');

                if (data.success) {
                    showSuccess(data);
                } else {
                    showError(data.error || '识别失败');
                }
            } catch (error) {
                loading.classList.remove('active');
                showError('网络错误: ' + error.message);
            }
        }

        // 显示成功结果
        function showSuccess(data) {
            let html = `
                <div class="result success">
                    <h3 style="color: #155724; margin-bottom: 15px;">✅ 识别成功！找到 ${data.count} 个二维码</h3>
            `;

            data.data.forEach((qr, index) => {
                html += `
                    <div class="qrcode-item">
                        <div class="qrcode-text">
                            <strong>二维码 #${index + 1}:</strong><br>
                            ${escapeHtml(qr.text)}
                        </div>
                        <div class="qrcode-location">
                            位置: (${qr.boundingBox.x}, ${qr.boundingBox.y}) 
                            大小: ${qr.boundingBox.width} × ${qr.boundingBox.height}
                        </div>
                    </div>
                `;
            });

            html += '</div>';
            result.innerHTML = html;
        }

        // 显示错误
        function showError(message) {
            result.innerHTML = `
                <div class="result error">
                    <h3 style="color: #721c24; margin-bottom: 10px;">❌ ${escapeHtml(message)}</h3>
                    <p style="color: #721c24;">请尝试上传更清晰的二维码图片</p>
                </div>
            `;
        }

        // HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    </script>
</body>
</html>

